import React, { useState, useEffect } from 'react';
import dayjs from 'dayjs';
import {
  Image,
  Message,
  PaginationProps,
  Table,
  TableColumnProps,
  Tag,
  Typography,
} from '@arco-design/web-react';
import styles from './index.module.less';
import { queryRaceInfoPage, publishRaceInfo } from '@/services/race';
import { RaceStatus } from './constants';
import _ from 'lodash-es';

// import './index.css'
export default function Page() {
  const [pageData, setPageData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [pagination, setPagination] = useState<PaginationProps>({
    sizeCanChange: true,
    showTotal: true,
    pageSize: 10,
    current: 1,
    pageSizeChangeResetCurrent: true,
  });

  useEffect(() => {
    fetchData();
  }, [pagination.current, pagination.pageSize]);

  const getTagInfo = (status) => {
    const RaceStatusByCode = _.transform(
      RaceStatus,
      (result, value) => {
        result[value.code] = value;
      },
      {}
    );
    return RaceStatusByCode[status] || {};
  };

  function fetchData() {
    setLoading(true);
    const { current, pageSize } = pagination;
    queryRaceInfoPage({
      pageNo: current,
      pageSize: pageSize,
    })
      .then((result) => {
        console.log(result);
        setPageData(result.data.list);
        setPagination({
          ...pagination,
          current,
          pageSize,
          total: result.data.totalCount || 0,
        });
        setLoading(false);
      })
      .catch((message) => {
        Message.error(message);
        setLoading(false);
      });
  }

  function onChangeTable({ current, pageSize }) {
    console.log(current);
    console.log(pageSize);
    setPagination({
      ...pagination,
      current,
      pageSize,
    });
  }

  //导出
  function handlerExport(record) {
    console.log(record);
    Message.info('导出待接入');
  }

  //发布
  function handlerPublish(record) {
    if (loading) {
      return;
    }
    setLoading(true);
    publishRaceInfo(record.id)
      .then((result) => {
        Message.info(result.message);
        setLoading(false);
        fetchData();
      })
      .catch((error) => {
        Message.error(error);
        setLoading(false);
      });
  }

  //概览
  function handlerOverview(record) {
    console.log(record);
    Message.info('概览');
  }

  //编辑
  function handlerEditRace(record) {
    console.log(record);
    Message.info('编辑');
  }

  const columns: TableColumnProps[] = [
    {
      title: '赛事信息',
      dataIndex: 'raceInfo',
      render: (col, item) => (
        <div className={styles['race-item-info']}>
          <Image
            width={117}
            height={80}
            className={styles['item-img']}
            src={item.coverImgUrl}
          ></Image>
          <div className={styles['item-content']}>
            <Typography.Ellipsis
              className={styles['item-title']}
              rows={2}
              expandable={false}
            >
              {item.title}
            </Typography.Ellipsis>
            <span className={styles['item-subtitle']}>ID:{item.raceCode}</span>
            <Typography.Ellipsis className={styles['item-subtitle']} rows={1}>
              报名时间:
              {dayjs(item.applyStartTime).format('YYYY-MM-DD HH:mm:ss')}~
              {dayjs(item.applyEndTime).format('YYYY-MM-DD HH:mm:ss')}
            </Typography.Ellipsis>
            <Typography.Ellipsis className={styles['item-subtitle']} rows={1}>
              赛事时间:{dayjs(item.startTime).format('YYYY-MM-DD HH:mm:ss')}~
              {dayjs(item.endTime).format('YYYY-MM-DD HH:mm:ss')}
            </Typography.Ellipsis>
          </div>

          <Image
            width={38}
            height={38}
            className={styles['item-qr']}
            src={item.coverImgUrl}
          ></Image>
        </div>
      ),
    },
    {
      title: '赛事数据',
      dataIndex: 'raceData',
      render: (col, item) => (
        <div className={styles['race-item-data']}>
          <div className={styles['race-item-data-i']}>
            <span>{item.visitCount || 0}</span>
            <span>赛事点击(次)</span>
          </div>
          <div className={styles['race-item-data-i']}>
            <span>{item.paidCount || 0}</span>
            <span>已支付(次)</span>
          </div>
          <div className={styles['race-item-data-i']}>
            <span>{item.paidAmount || 0}</span>
            <span>已收报名费(次)</span>
          </div>
          <div className={styles['race-item-data-ii']}>
            <span
              onClick={() => {
                handlerExport(item);
              }}
            >
              导出名单
            </span>
          </div>
        </div>
      ),
    },
    {
      title: '赛事状态',
      dataIndex: 'raceStatus',
      render: (col, item) => {
        const tagData = getTagInfo(item.status);
        return (
          <div className={styles['race-item-status']}>
            <span>
              <Tag color={tagData.color || 'gray'}>{tagData.name || ''}</Tag>
            </span>
            <span>{tagData.desc || ''}</span>
          </div>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'operations',
      render: (col, item) => (
        <div className={styles['race-item-operations']}>
          <span
            onClick={() => {
              handlerOverview(item);
            }}
          >
            赛事概览
          </span>
          <span
            onClick={() => {
              handlerEditRace(item);
            }}
          >
            编辑赛事
          </span>
          <span
            onClick={() => {
              handlerPublish(item);
            }}
          >
            发布赛事
          </span>
        </div>
      ),
    },
  ];

  return (
    <div className={styles.container}>
      <Table
        columns={columns}
        data={pageData}
        loading={loading}
        onChange={onChangeTable}
        className={styles['custom-table']}
        border={{
          wrapper: false,
          cell: false,
        }}
      ></Table>
    </div>
  );
}
